const createTemplate = (dataTarget, className = '') => {
    let str = ` <a class="list-group-item list-group-item-action ${className}" data="${dataTarget}" data-toggle="list" role="tab">${dataTarget}</a>`
    return str;
}

const generatorMenubar = (data) => {
    let str = '';
    for (let obj of data) {
        let subitem = [];
        for (let sub of obj.subitems) {
            subitem.push(sub.title);
        }
        str += createTemplate(obj.dataTarget);
    }
    document.getElementById("menu-bar").innerHTML = str;
    document.querySelector('#menu-bar>a:first-child').classList.add('active');
}

const generatoraChildMenubar = (dataTarget, data, dataTitle) => {
    let str = '';
    for (let obj of data) {
        if (obj.dataTarget == dataTarget) {
            for (let childObj of obj.subitems) {
                str += createTemplate(childObj.title, dataTitle === childObj.title ? 'active' : '');
            }
        }
    }
    document.getElementById("grandList").innerHTML = str;
}

export {
    generatorMenubar,
    generatoraChildMenubar
};